代码拉取完成，页面将自动刷新
同步操作将从 element-plus/doc-archive 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[202],{
/***/ 945:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXTERNAL MODULE: ./node_modules/vue/dist/vue.esm-browser.prod.js
var vue_esm_browser_prod = __webpack_require__(0);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--3-0!./website/md-loader!./website/docs/fr-FR/table.md?vue&type=template&id=7b43ea8a
const tablevue_type_template_id_7b43ea8a_hoisted_1 = {
class: "content element-doc"
};
const tablevue_type_template_id_7b43ea8a_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Table ");
const tablevue_type_template_id_7b43ea8a_hoisted_3 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Permet d'afficher de nombreuses données possédant un format similaire. Vous pouvez ainsi trier, filtrer et comparer les données de votre tableau.", -1);
const tablevue_type_template_id_7b43ea8a_hoisted_4 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Table basique ");
const tablevue_type_template_id_7b43ea8a_hoisted_5 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Un tableau de base pour afficher seulement.", -1);
const _hoisted_6 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Après avoir configuré l'attribut "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "data"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" de "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" avec un tableau d'objets, vous pouvez utiliser "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "prop"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" (correspondant à une clé dans chaque objet du tableau "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "data"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(") dans "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table-column"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" pour insérer des données dans les colonnes, ainsi que l'attribut "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "label"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" pour définir le nom de la colonne. L'attribut "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "width"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" définit si besoin la largeur de la colonne.")])], -1);
const _hoisted_7 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table :data=\"tableData\" style=\"width: 100%\">\n <el-table-column prop=\"date\" label=\"Date\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"address\" label=\"Adresse\"> </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n ],\n }\n },\n }\n</script>\n")], -1);
const _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Table rayée ");
const _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Ajouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement.", -1);
const _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("L'attribut "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "stripe"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" accepte un "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "Boolean"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". Si "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "true"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", le tableau sera rayé.")])], -1);
const _hoisted_11 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table :data=\"tableData\" stripe style=\"width: 100%\">\n <el-table-column prop=\"date\" label=\"Date\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"address\" label=\"Adresse\"> </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n ],\n }\n },\n }\n</script>\n")], -1);
const _hoisted_12 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Table avec bordure ");
const _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Par défaut, Table n'a pas de bordure verticale. Si vous en avez besoin, mettez l'attribut "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "border"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" à "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "true"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(".")])], -1);
const _hoisted_14 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table :data=\"tableData\" border style=\"width: 100%\">\n <el-table-column prop=\"date\" label=\"Date\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"address\" label=\"Adresse\"> </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n ],\n }\n },\n }\n</script>\n")], -1);
const _hoisted_15 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Table avec statut ");
const _hoisted_16 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Vous pouvez mettre en valeur certaines lignes du tableau suivant leur état, comme \"success\", \"information\", \"warning\", \"danger\" et d'autres.", -1);
const _hoisted_17 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Utilisez "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "row-class-name"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" dans "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" pour utiliser une fonction qui permettra ajouter des classes à certaines lignes. Vous pouvez ensuite définir les classes en question dans votre CSS.")])], -1);
const _hoisted_18 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\"\n :row-class-name=\"tableRowClassName\"\n >\n <el-table-column prop=\"date\" label=\"Date\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"address\" label=\"Adresse\"> </el-table-column>\n </el-table>\n</template>\n\n<style>\n .el-table .warning-row {\n --el-table-tr-background-color: var(--el-color-warning-lighter);\n }\n .el-table .success-row {\n --el-table-tr-background-color: var(--el-color-success-lighter);\n }\n</style>\n\n<script>\n export default {\n methods: {\n tableRowClassName({ row, rowIndex }) {\n if (rowIndex === 1) {\n return 'warning-row'\n } else if (rowIndex === 3) {\n return 'success-row'\n }\n return ''\n },\n },\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n ],\n }\n },\n }\n</script>\n")], -1);
const _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Table avec un header fixe ");
const _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Lorsqu'il y a beaucoup de lignes, il peut être utile d'avoir un header fixe afin de ne pas perdre le nom de colonnes à mesure que l'utilisateur défile vers le bas.", -1);
const _hoisted_21 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("En réglant l'attribut "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "height"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" de "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", vous pouvez fixer le header sans avoir besoin de plus de code.")])], -1);
const _hoisted_22 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table :data=\"tableData\" height=\"250\" style=\"width: 100%\">\n <el-table-column prop=\"date\" label=\"Date\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"address\" label=\"Adresse\"> </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n ],\n }\n },\n }\n</script>\n")], -1);
const _hoisted_23 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Table avec colonnes fixes ");
const _hoisted_24 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Lorsque qu'il y a beaucoup de colonnes, il peut être utile d'en fixer certaines afin de ne pas perdre de vue leurs informations à mesure que l'utilisateur défile sur les cotés.", -1);
const _hoisted_25 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Utilisez l'attribut "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "fixed"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" de "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table-column"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" qui accepte un "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "Boolean"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". Si "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "true"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", la colonne sera fixée à gauche. Il accepte aussi les valeurs 'left' et 'right', indiquant de quel coté la colonne doit être fixée.")])], -1);
const _hoisted_26 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table :data=\"tableData\" style=\"width: 100%\">\n <el-table-column fixed prop=\"date\" label=\"Date\" width=\"150\">\n </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" width=\"120\"> </el-table-column>\n <el-table-column prop=\"state\" label=\"État\" width=\"120\"> </el-table-column>\n <el-table-column prop=\"city\" label=\"Ville\" width=\"120\"> </el-table-column>\n <el-table-column prop=\"address\" label=\"Adresse\" width=\"600\">\n </el-table-column>\n <el-table-column prop=\"zip\" label=\"Zip\" width=\"120\"> </el-table-column>\n <el-table-column fixed=\"right\" label=\"Opérations\" width=\"120\">\n <template #default=\"scope\">\n <el-button @click=\"handleClick\" type=\"text\" size=\"small\"\n >Detail</el-button\n >\n <el-button type=\"text\" size=\"small\">Editer</el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n methods: {\n handleClick() {\n console.log('click')\n },\n },\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office',\n },\n ],\n }\n },\n }\n</script>\n")], -1);
const _hoisted_27 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Table avec header et colonnes fixes ");
const _hoisted_28 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Si vous avez un gros volume de données à afficher, vous pouvez fixer le header et des colonnes en même temps.", -1);
const _hoisted_29 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Header et colonnes fixes combinant les deux exemples précédents.")], -1);
const _hoisted_30 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table :data=\"tableData\" style=\"width: 100%\" height=\"250\">\n <el-table-column fixed prop=\"date\" label=\"Date\" width=\"150\">\n </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" width=\"120\"> </el-table-column>\n <el-table-column prop=\"state\" label=\"État\" width=\"120\"> </el-table-column>\n <el-table-column prop=\"city\" label=\"Ville\" width=\"320\"> </el-table-column>\n <el-table-column prop=\"address\" label=\"Adresse\" width=\"600\">\n </el-table-column>\n <el-table-column prop=\"zip\" label=\"Zip\" width=\"120\"> </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n ],\n }\n },\n }\n</script>\n")], -1);
const _hoisted_31 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Hauteur fluide dans une Table avec header et colonnes fixes ");
const _hoisted_32 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Quand les données changent dynamiquement, vous pouvez avoir besoin d'une hauteur maximale et d'afficher une barre de défilement si besoin.", -1);
const _hoisted_33 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("En utilisant l'attribut "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "max-height"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" de "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", vous fixez le header. Le tableau ne défilera que si la hauteur des lignes dépasse cette hauteur maximale.")])], -1);
const _hoisted_34 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table :data=\"tableData\" style=\"width: 100%\" max-height=\"250\">\n <el-table-column fixed prop=\"date\" label=\"Date\" width=\"150\">\n </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" width=\"120\"> </el-table-column>\n <el-table-column prop=\"state\" label=\"État\" width=\"120\"> </el-table-column>\n <el-table-column prop=\"city\" label=\"Ville\" width=\"120\"> </el-table-column>\n <el-table-column prop=\"address\" label=\"Adresse\" width=\"600\">\n </el-table-column>\n <el-table-column prop=\"zip\" label=\"Zip\" width=\"120\"> </el-table-column>\n <el-table-column fixed=\"right\" label=\"Opérations\" width=\"120\">\n <template #default=\"scope\">\n <el-button\n @click.prevent=\"deleteRow(scope.$index, tableData)\"\n type=\"text\"\n size=\"small\"\n >\n Supprimer\n </el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n methods: {\n deleteRow(index, rows) {\n rows.splice(index, 1)\n },\n },\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n ],\n }\n },\n }\n</script>\n")], -1);
const _hoisted_35 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Grouper les headers ");
const _hoisted_36 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Quand la structure du tableau est complexe, vous pouvez grouper les headers afin de montrer une hiérarchie.", -1);
const _hoisted_37 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Placez simplement "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table-column"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" dans une autre "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table-column"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", et vous grouperez ainsi les headers.")])], -1);
const _hoisted_38 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table :data=\"tableData\" style=\"width: 100%\">\n <el-table-column prop=\"date\" label=\"Date\" width=\"150\"> </el-table-column>\n <el-table-column label=\"Informations de livraison\">\n <el-table-column prop=\"name\" label=\"Nom\" width=\"120\"> </el-table-column>\n <el-table-column label=\"Informations d'adresse\">\n <el-table-column prop=\"state\" label=\"État\" width=\"120\">\n </el-table-column>\n <el-table-column prop=\"city\" label=\"Ville\" width=\"120\">\n </el-table-column>\n <el-table-column prop=\"address\" label=\"Adresse\"> </el-table-column>\n <el-table-column prop=\"zip\" label=\"Zip\" width=\"120\"> </el-table-column>\n </el-table-column>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n ],\n }\n },\n }\n</script>\n")], -1);
const _hoisted_39 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Sélecteur simple ");
const _hoisted_40 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Vous pouvez activer la sélection d'une ligne.", -1);
const _hoisted_41 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Activez la sélection en ajoutant l'attribut "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "highlight-current-row"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". L'évènement "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "current-change"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" se déclenchera à chaque changement de sélection, ses paramètres étant les deux lignes avant et après le changement: "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "currentRow"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" et "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "oldCurrentRow"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". Si vous avez besoin d'afficher l'index des lignes, ajoutez une "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table-column"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" avec pour "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" la valeur "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "index"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", qui commencera à 1.")])], -1);
const _hoisted_42 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table\n ref=\"singleTable\"\n :data=\"tableData\"\n highlight-current-row\n @current-change=\"handleCurrentChange\"\n style=\"width: 100%\"\n >\n <el-table-column type=\"index\" width=\"50\"> </el-table-column>\n <el-table-column property=\"date\" label=\"Date\" width=\"120\">\n </el-table-column>\n <el-table-column property=\"name\" label=\"Nom\" width=\"120\"> </el-table-column>\n <el-table-column property=\"address\" label=\"Adresse\"> </el-table-column>\n </el-table>\n <div style=\"margin-top: 20px\">\n <el-button @click=\"setCurrent(tableData[1])\"\n >Sélectionner la deuxième ligne</el-button\n >\n <el-button @click=\"setCurrent()\">Effacer la sélection</el-button>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n ],\n currentRow: null,\n }\n },\n\n methods: {\n setCurrent(row) {\n this.$refs.singleTable.setCurrentRow(row)\n },\n handleCurrentChange(val) {\n this.currentRow = val\n },\n },\n }\n</script>\n")], -1);
const _hoisted_43 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Sélection multiple ");
const _hoisted_44 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Vous pouvez aussi sélectionner plusieurs lignes.", -1);
const _hoisted_45 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Ajoutez une "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table-column"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" avec son "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" à "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "selection"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". Cet exemple utilise aussi "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "show-overflow-tooltip"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(": par défaut, si le contenu est trop long, il se séparera en plusieurs lignes. Si vous souhaitez conserver une seule ligne, utilisez "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "show-overflow-tooltip"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", qui accepte un "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "Boolean"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". Si "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "true"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", le contenu non affiché s'affichera dans le tooltip lorsque la souris passera sur la case.")])], -1);
const _hoisted_46 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table\n ref=\"multipleTable\"\n :data=\"tableData\"\n style=\"width: 100%\"\n @selection-change=\"handleSelectionChange\"\n >\n <el-table-column type=\"selection\" width=\"55\"> </el-table-column>\n <el-table-column label=\"Date\" width=\"120\">\n <template #default=\"scope\">{{ scope.row.date }}</template>\n </el-table-column>\n <el-table-column property=\"name\" label=\"Nom\" width=\"120\"> </el-table-column>\n <el-table-column property=\"address\" label=\"Adresse\" show-overflow-tooltip>\n </el-table-column>\n </el-table>\n <div style=\"margin-top: 20px\">\n <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\"\n >Sélectionner les deuxième et troisième lignes</el-button\n >\n <el-button @click=\"toggleSelection()\">Effacer la sélection</el-button>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n ],\n multipleSelection: [],\n }\n },\n\n methods: {\n toggleSelection(rows) {\n if (rows) {\n rows.forEach((row) => {\n this.$refs.multipleTable.toggleRowSelection(row)\n })\n } else {\n this.$refs.multipleTable.clearSelection()\n }\n },\n handleSelectionChange(val) {\n this.multipleSelection = val\n },\n },\n }\n</script>\n")], -1);
const _hoisted_47 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Trier ");
const _hoisted_48 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Il est possible de trier les données afin de trouver plus facilement ce qu'on cherche.", -1);
const _hoisted_49 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Ajoutez l'attribut "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "sortable"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" a une colonne pour pouvoir trier cette colonne. Il accepte un "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "Boolean"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" et à "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "false"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" par défaut. Ajoutez "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "default-sort"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" pour déterminer les propriétés par défaut du tri. Pour appliquer vos propres règles, utilisez "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "sort-method"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" ou "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "sort-by"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". Si vous avez besoin d'un tri dynamique depuis le serveur, mettez "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "sortable"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" à "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "custom"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", et écoutez l'évènement "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "sort-change"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" de "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "Table"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". Depuis cet évènement, vous aurez accès à la colonne et l'ordre de tri. cet exemple utilise aussi "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "formatter"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" pour formater les valeurs de colonnes. Il prend une fonction avec deux paramètres: "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "row"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" et "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "column"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". Vous pouvez ainsi transformer les valeurs.")])], -1);
const _hoisted_50 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table\n :data=\"tableData\"\n :default-sort=\"{prop: 'date', order: 'descending'}\"\n style=\"width: 100%\"\n >\n <el-table-column prop=\"date\" label=\"Date\" sortable width=\"180\">\n </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"address\" label=\"Adresse\" :formatter=\"formatter\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n ],\n }\n },\n methods: {\n formatter(row, column) {\n return row.address\n },\n },\n }\n</script>\n")], -1);
const _hoisted_51 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Filtrer ");
const _hoisted_52 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.", -1);
const _hoisted_53 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Réglez "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "filters"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" et "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "filter-method"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" dans "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table-column"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" pour rendre la colonne filtrable. "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "filters"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" prends un tableau, et "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "filter-method"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" est une fonction déterminant comment les lignes s'affichent. Elle prend trois paramètres: "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "value"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "row"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" et "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "column"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(".")])], -1);
const _hoisted_54 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-button @click=\"resetDateFilter\">Effacer le filtre date</el-button>\n <el-button @click=\"clearFilter\">Effacer tout les filtres</el-button>\n <el-table\n row-key=\"date\"\n ref=\"filterTable\"\n :data=\"tableData\"\n style=\"width: 100%\"\n >\n <el-table-column\n prop=\"date\"\n label=\"Date\"\n sortable\n width=\"180\"\n column-key=\"date\"\n :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n :filter-method=\"filterHandler\"\n >\n </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"address\" label=\"Adresse\" :formatter=\"formatter\">\n </el-table-column>\n <el-table-column\n prop=\"tag\"\n label=\"Tag\"\n width=\"100\"\n :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n :filter-method=\"filterTag\"\n filter-placement=\"bottom-end\"\n >\n <template #default=\"scope\">\n <el-tag\n :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n disable-transitions\n >{{scope.row.tag}}</el-tag\n >\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office',\n },\n ],\n }\n },\n methods: {\n resetDateFilter() {\n this.$refs.filterTable.clearFilter('date')\n },\n clearFilter() {\n this.$refs.filterTable.clearFilter()\n },\n formatter(row, column) {\n return row.address\n },\n filterTag(value, row) {\n return row.tag === value\n },\n filterHandler(value, row, column) {\n const property = column['property']\n return row[property] === value\n },\n },\n }\n</script>\n")], -1);
const _hoisted_55 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Template de colonne personnalisé ");
const _hoisted_56 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres composants.", -1);
const _hoisted_57 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Vous avez acccès aux données suivantes: ");
const _hoisted_58 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "row", -1);
const _hoisted_59 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", ");
const _hoisted_60 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "column", -1);
const _hoisted_61 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", ");
const _hoisted_62 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "$index", -1);
const _hoisted_63 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" et ");
const _hoisted_64 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "store", -1);
const _hoisted_65 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" (gestionnaire d'état de Table) grâce aux ");
const _hoisted_66 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("slot");
const _hoisted_67 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(".");
const _hoisted_68 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table :data=\"tableData\" style=\"width: 100%\">\n <el-table-column label=\"Date\" width=\"180\">\n <template #default=\"scope\">\n <i class=\"el-icon-time\"></i>\n <span style=\"margin-left: 10px\">{{ scope.row.date }}</span>\n </template>\n </el-table-column>\n <el-table-column label=\"Nom\" width=\"180\">\n <template #default=\"scope\">\n <el-popover effect=\"light\" trigger=\"hover\" placement=\"top\">\n <template #default>\n <p>姓名: {{ scope.row.name }}</p>\n <p>住址: {{ scope.row.address }}</p>\n </template>\n <template #reference>\n <div class=\"name-wrapper\">\n <el-tag size=\"medium\">{{ scope.row.name }}</el-tag>\n </div>\n </template>\n </el-popover>\n </template>\n </el-table-column>\n <el-table-column label=\"Opérations\">\n <template #default=\"scope\">\n <el-button size=\"mini\" @click=\"handleEdit(scope.$index, scope.row)\"\n >Editer</el-button\n >\n <el-button\n size=\"mini\"\n type=\"danger\"\n @click=\"handleDelete(scope.$index, scope.row)\"\n >Supprimer</el-button\n >\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n ],\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row)\n },\n handleDelete(index, row) {\n console.log(index, row)\n },\n },\n }\n</script>\n")], -1);
const _hoisted_69 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Table avec header personnalisé ");
const _hoisted_70 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Vous pouvez également personnaliser le header de la table.", -1);
const _hoisted_71 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Vous pouvez personnaliser le header grâce aux ");
const _hoisted_72 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("slots");
const _hoisted_73 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(".");
const _hoisted_74 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table\n :data=\"tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))\"\n style=\"width: 100%\"\n >\n <el-table-column label=\"Date\" prop=\"date\"> </el-table-column>\n <el-table-column label=\"Name\" prop=\"name\"> </el-table-column>\n <el-table-column align=\"right\">\n <template #header>\n <el-input v-model=\"search\" size=\"mini\" placeholder=\"Type to search\" />\n </template>\n <template #default=\"scope\">\n <el-button size=\"mini\" @click=\"handleEdit(scope.$index, scope.row)\"\n >Editer</el-button\n >\n <el-button\n size=\"mini\"\n type=\"danger\"\n @click=\"handleDelete(scope.$index, scope.row)\"\n >Supprimer</el-button\n >\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-02',\n name: 'John',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-04',\n name: 'Morgan',\n address: 'No. 189, Grove St, Los Angeles',\n },\n {\n date: '2016-05-01',\n name: 'Jessy',\n address: 'No. 189, Grove St, Los Angeles',\n },\n ],\n search: '',\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row)\n },\n handleDelete(index, row) {\n console.log(index, row)\n },\n },\n }\n</script>\n")], -1);
const _hoisted_75 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Ligne extensible ");
const _hoisted_76 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas afficher de scrollbar, vous pouvez utiliser une ligne extensible.", -1);
const _hoisted_77 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Activer la ligne extensible en mettant "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" à "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "expand"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" et en utilisant un slot. Le contenu de "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table-column"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" sera généré quand l'extension aura lieu, et vous avez aux même attributs que pour le slot des templates de colonnes.")])], -1);
const _hoisted_78 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table :data=\"tableData\" style=\"width: 100%\">\n <el-table-column type=\"expand\">\n <template #default=\"props\">\n <p>État: {{ props.row.state }}</p>\n <p>Ville: {{ props.row.city }}</p>\n <p>Adresse: {{ props.row.address }}</p>\n <p>Zip: {{ props.row.zip }}</p>\n </template>\n </el-table-column>\n <el-table-column label=\"Date\" prop=\"date\"> </el-table-column>\n <el-table-column label=\"Nom\" prop=\"name\"> </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n },\n ],\n }\n },\n }\n</script>\n")], -1);
const _hoisted_79 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Arborescence et lazy loading ");
const _hoisted_80 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("You can display tree structure data. When row contains the "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "children"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" field, it is treated as nested data. For rendering nested data, the prop "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "row-key"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" is required。Also, child row data can be loaded asynchronously. Set "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "lazy"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" property of Table to true and the function "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "load"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". Specify "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "hasChildren"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" attribute in row to determine which row contains children. Both "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "children"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" and "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "hasChildren"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" can be configured via "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "tree-props"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(".")])], -1);
const _hoisted_81 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <div>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%;margin-bottom: 20px;\"\n row-key=\"id\"\n border\n default-expand-all\n >\n <el-table-column prop=\"date\" label=\"date\" sortable width=\"180\">\n </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" sortable width=\"180\">\n </el-table-column>\n </el-table>\n\n <el-table\n :data=\"tableData1\"\n style=\"width: 100%\"\n row-key=\"id\"\n border\n lazy\n :load=\"load\"\n :tree-props=\"{children: 'children', hasChildren: 'hasChildren'}\"\n >\n <el-table-column prop=\"date\" label=\"Date\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" width=\"180\"> </el-table-column>\n </el-table>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n id: 1,\n date: '2016-05-02',\n name: 'wangxiaohu',\n },\n {\n id: 2,\n date: '2016-05-04',\n name: 'wangxiaohu',\n },\n {\n id: 3,\n date: '2016-05-01',\n name: 'wangxiaohu',\n children: [\n {\n id: 31,\n date: '2016-05-01',\n name: 'wangxiaohu',\n },\n {\n id: 32,\n date: '2016-05-01',\n name: 'wangxiaohu',\n },\n ],\n },\n {\n id: 4,\n date: '2016-05-03',\n name: 'wangxiaohu',\n },\n ],\n tableData1: [\n {\n id: 1,\n date: '2016-05-02',\n name: 'wangxiaohu',\n },\n {\n id: 2,\n date: '2016-05-04',\n name: 'wangxiaohu',\n },\n {\n id: 3,\n date: '2016-05-01',\n name: 'wangxiaohu',\n hasChildren: true,\n },\n {\n id: 4,\n date: '2016-05-03',\n name: 'wangxiaohu',\n },\n ],\n }\n },\n methods: {\n load(tree, treeNode, resolve) {\n setTimeout(() => {\n resolve([\n {\n id: 31,\n date: '2016-05-01',\n name: 'wangxiaohu',\n },\n {\n id: 32,\n date: '2016-05-01',\n name: 'wangxiaohu',\n },\n ])\n }, 1000)\n },\n },\n }\n</script>\n")], -1);
const _hoisted_82 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Ligne de somme ");
const _hoisted_83 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Pour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour afficher la somme de chaque colonne.", -1);
const _hoisted_84 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Mettez l'attribut "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "show-summary"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" à "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "true"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" dans "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". Par défaut, la première colonne n'affiche que 'Sum' (vous pouvez configurer ce label avec "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "sum-text"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("), alors que les autres affichent la somme de chaque colonne. Vous pouvez choisir comment effectuer l'opération grâce à "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "summary-method"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", qui doit retourner un tableau, cahque élément correspondant à la somme de chaque colonne. La deuxième table de cet exemple montre tout cela en pratique.")])], -1);
const _hoisted_85 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table :data=\"tableData\" border show-summary style=\"width: 100%\">\n <el-table-column prop=\"id\" label=\"ID\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\"> </el-table-column>\n <el-table-column prop=\"amount1\" sortable label=\"Quantité 1\">\n </el-table-column>\n <el-table-column prop=\"amount2\" sortable label=\"Quantité 2\">\n </el-table-column>\n <el-table-column prop=\"amount3\" sortable label=\"Quantité 3\">\n </el-table-column>\n </el-table>\n\n <el-table\n :data=\"tableData\"\n border\n height=\"200\"\n :summary-method=\"getSummaries\"\n show-summary\n style=\"width: 100%; margin-top: 20px\"\n >\n <el-table-column prop=\"id\" label=\"ID\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\"> </el-table-column>\n <el-table-column prop=\"amount1\" label=\"Coût 1 ($)\"> </el-table-column>\n <el-table-column prop=\"amount2\" label=\"Coût 2 ($)\"> </el-table-column>\n <el-table-column prop=\"amount3\" label=\"Coût 3 ($)\"> </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n id: '12987122',\n name: 'Tom',\n amount1: '234',\n amount2: '3.2',\n amount3: 10,\n },\n {\n id: '12987123',\n name: 'Tom',\n amount1: '165',\n amount2: '4.43',\n amount3: 12,\n },\n {\n id: '12987124',\n name: 'Tom',\n amount1: '324',\n amount2: '1.9',\n amount3: 9,\n },\n {\n id: '12987125',\n name: 'Tom',\n amount1: '621',\n amount2: '2.2',\n amount3: 17,\n },\n {\n id: '12987126',\n name: 'Tom',\n amount1: '539',\n amount2: '4.1',\n amount3: 15,\n },\n ],\n }\n },\n methods: {\n getSummaries(param) {\n const { columns, data } = param\n const sums = []\n columns.forEach((column, index) => {\n if (index === 0) {\n sums[index] = 'Coût total'\n return\n }\n const values = data.map((item) => Number(item[column.property]))\n if (!values.every((value) => isNaN(value))) {\n sums[index] =\n '$ ' +\n values.reduce((prev, curr) => {\n const value = Number(curr)\n if (!isNaN(value)) {\n return prev + curr\n } else {\n return prev\n }\n }, 0)\n } else {\n sums[index] = 'N/A'\n }\n })\n\n return sums\n },\n },\n }\n</script>\n")], -1);
const _hoisted_86 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Étendue des lignes et colonnes ");
const _hoisted_87 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Vous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des cellules.", -1);
const _hoisted_88 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Utilisez "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "span-method"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" pour configurer chaque étendue. Il accepte une fonction, et lui passe un objet incluant la ligne actuelle "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "row"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", la colonne actuelle "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "column"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", l'index de la ligne "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "rowIndex"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" et l'index de la colonne "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "columnIndex"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". La fonction doit retourner un tableau contenant deux nombres, le premier étant "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "rowspan"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" et le second "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "colspan"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". Elle peut aussi retourner un objet avec les propriétés "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "rowspan"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" et "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "colspan"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(".")])], -1);
const _hoisted_89 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <div>\n <el-table\n :data=\"tableData\"\n :span-method=\"arraySpanMethod\"\n border\n style=\"width: 100%\"\n >\n <el-table-column prop=\"id\" label=\"ID\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\"> </el-table-column>\n <el-table-column prop=\"amount1\" sortable label=\"Quantité 1\">\n </el-table-column>\n <el-table-column prop=\"amount2\" sortable label=\"Quantité 2\">\n </el-table-column>\n <el-table-column prop=\"amount3\" sortable label=\"Quantité 3\">\n </el-table-column>\n </el-table>\n\n <el-table\n :data=\"tableData\"\n :span-method=\"objectSpanMethod\"\n border\n style=\"width: 100%; margin-top: 20px\"\n >\n <el-table-column prop=\"id\" label=\"ID\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\"> </el-table-column>\n <el-table-column prop=\"amount1\" label=\"Quantité 1\"> </el-table-column>\n <el-table-column prop=\"amount2\" label=\"Quantité 2\"> </el-table-column>\n <el-table-column prop=\"amount3\" label=\"Quantité 3\"> </el-table-column>\n </el-table>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n id: '12987122',\n name: 'Tom',\n amount1: '234',\n amount2: '3.2',\n amount3: 10,\n },\n {\n id: '12987123',\n name: 'Tom',\n amount1: '165',\n amount2: '4.43',\n amount3: 12,\n },\n {\n id: '12987124',\n name: 'Tom',\n amount1: '324',\n amount2: '1.9',\n amount3: 9,\n },\n {\n id: '12987125',\n name: 'Tom',\n amount1: '621',\n amount2: '2.2',\n amount3: 17,\n },\n {\n id: '12987126',\n name: 'Tom',\n amount1: '539',\n amount2: '4.1',\n amount3: 15,\n },\n ],\n }\n },\n methods: {\n arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n if (rowIndex % 2 === 0) {\n if (columnIndex === 0) {\n return [1, 2]\n } else if (columnIndex === 1) {\n return [0, 0]\n }\n }\n },\n\n objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n if (columnIndex === 0) {\n if (rowIndex % 2 === 0) {\n return {\n rowspan: 2,\n colspan: 1,\n }\n } else {\n return {\n rowspan: 0,\n colspan: 0,\n }\n }\n }\n },\n },\n }\n</script>\n")], -1);
const _hoisted_90 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Indices personnalisés ");
const _hoisted_91 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Vous pouvez personnaliser les indices des colonnes de type "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "index"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(".")], -1);
const _hoisted_92 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Utilisez l'attribut "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "index"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" sur une "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "el-table-column"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" avec "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "type=index"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(". Si un nombre est assigné, tout les indices auront un décalage égal à ce nombre. Il peut aussi prendre une fonction avec chaque indice (commençant à "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "0"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(") comme paramètre, et la valeur de retour sera affichée en tant qu'indice.")])], -1);
const _hoisted_93 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
class: "html"
}, "<template>\n <el-table :data=\"tableData\" style=\"width: 100%\">\n <el-table-column type=\"index\" :index=\"indexMethod\"> </el-table-column>\n <el-table-column prop=\"date\" label=\"Date\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"name\" label=\"Nom\" width=\"180\"> </el-table-column>\n <el-table-column prop=\"address\" label=\"Adresse\"> </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [\n {\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home',\n },\n {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office',\n },\n {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home',\n },\n {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office',\n },\n ],\n }\n },\n methods: {\n indexMethod(index) {\n return index * 2\n },\n },\n }\n</script>\n")], -1);
const _hoisted_94 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Attributs de Table ");
const _hoisted_95 = /*#__PURE__*/Object(vue_esm_browser_prod["createStaticVNode"])("<table><thead><tr><th>Attribut</th><th>Description</th><th>Type</th><th>Valeurs acceptées</th><th>Défaut</th></tr></thead><tbody><tr><td>data</td><td>Les données de la table.</td><td>array</td><td>—</td><td>—</td></tr><tr><td>height</td><td>La hauteur de la table. Par défaut la hauteur est <code>auto</code>. Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes.</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>max-height</td><td>Table's max-height. The legal value is a number or the height in px.</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>stripe</td><td>Si la table est rayée.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>border</td><td>Si la table à une bordure verticale.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>size</td><td>Taille de la table.</td><td>string</td><td>medium / small / mini</td><td>—</td></tr><tr><td>fit</td><td>Si la largeur des colonnes s'adapte au conteneur.</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>show-header</td><td>Si le header de la table est visible.</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>highlight-current-row</td><td>Si la ligne courante est mise en valeur.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>current-row-key</td><td>Clé de la ligne actuelle. Propriété set-only.</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>row-class-name</td><td>Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne.</td><td>function({ row, rowIndex }) / string</td><td>—</td><td>—</td></tr><tr><td>row-style</td><td>Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne.</td><td>function({ row, rowIndex }) / object</td><td>—</td><td>—</td></tr><tr><td>cell-class-name</td><td>Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule.</td><td>function({ row, column, rowIndex, columnIndex }) / string</td><td>—</td><td>—</td></tr><tr><td>cell-style</td><td>Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule.</td><td>function({ row, column, rowIndex, columnIndex }) / object</td><td>—</td><td>—</td></tr><tr><td>header-row-class-name</td><td>Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header.</td><td>function({ row, rowIndex }) / string</td><td>—</td><td>—</td></tr><tr><td>header-row-style</td><td>Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header.</td><td>function({ row, rowIndex }) / object</td><td>—</td><td>—</td></tr><tr><td>header-cell-class-name</td><td>Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header.</td><td>function({ row, column, rowIndex, columnIndex }) / string</td><td>—</td><td>—</td></tr><tr><td>header-cell-style</td><td>Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header.</td><td>function({ row, column, rowIndex, columnIndex }) / object</td><td>—</td><td>—</td></tr><tr><td>row-key</td><td>Clé de chaque ligne, utilisée pour optimiser le rendu. Requise si <code>reserve-selection</code> est activé. Quand c'est un <code>String</code>, l'accès multi-niveaux est supporté, e.g. <code>user.info.id</code>, mais <code>user.info[0].id</code> n'est pas supporté. Dans ce dernier cas une <code>Function</code> devrait être utilisée.</td><td>function(row) / string</td><td>—</td><td>—</td></tr><tr><td>empty-text</td><td>Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à <code>#empty</code>.</td><td>string</td><td>—</td><td>No Data</td></tr><tr><td>default-expand-all</td><td>whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>expand-row-keys</td><td>Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer <code>row-key</code> avant celle-ci.</td><td>array</td><td>—</td><td>—</td></tr><tr><td>default-sort</td><td>Détermine l'ordre de tri par défaut. La propriété <code>prop</code> détermine la colonne par défaut, <code>order</code> détermine l'ordre par défaut.</td><td>object</td><td><code>order</code>: ascending / descending</td><td>Si <code>order</code> est absent, son défaut sera <code>ascending</code>.</td></tr><tr><td>tooltip-effect</td><td>Propriété <code>effect</code> de Tooltip.</td><td>string</td><td>dark / light</td><td>dark</td></tr><tr><td>show-summary</td><td>Si une ligne de somme doit apparaître.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>sum-text</td><td>Le label de la première cellule de la ligne de somme.</td><td>string</td><td>—</td><td>Sum</td></tr><tr><td>summary-method</td><td>La méthode pour calculer la somme.</td><td>function({ columns, data })</td><td>—</td><td>—</td></tr><tr><td>span-method</td><td>Méthode qui retourne les valeurs de colspan et rowspan.</td><td>function({ row, column, rowIndex, columnIndex })</td><td>—</td><td>—</td></tr><tr><td>select-on-indeterminate</td><td>Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si <code>true</code>, toutes les lignes sont sélectionnées.</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>indent</td><td>horizontal indentation of tree data</td><td>number</td><td>—</td><td>16</td></tr><tr><td>lazy</td><td>whether to lazy loading data</td><td>boolean</td><td>—</td><td>—</td></tr><tr><td>load</td><td>method for loading child row data, only works when <code>lazy</code> is true</td><td>function({ row, treeNode, resolve })</td><td>—</td><td>—</td></tr><tr><td>tree-props</td><td>configuration for rendering nested data</td><td>object</td><td>—</td><td>{ hasChildren: 'hasChildren', children: 'children' }</td></tr></tbody></table>", 1);
const _hoisted_96 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Évènements de Table ");
const _hoisted_97 = /*#__PURE__*/Object(vue_esm_browser_prod["createStaticVNode"])("<table><thead><tr><th>Nom</th><th>Description</th><th>Paramètres</th></tr></thead><tbody><tr><td>select</td><td>Se déclenche quand l'utilisateur clique sur la checkbox d'une ligne.</td><td>selection, row</td></tr><tr><td>select-all</td><td>Se déclenche quand l'utilisateur clique sur la checkbox du header.</td><td>selection</td></tr><tr><td>selection-change</td><td>Se déclenche quand la selection change.</td><td>selection</td></tr><tr><td>cell-mouse-enter</td><td>Se déclenche quand la souris passe sur une cellule.</td><td>row, column, cell, event</td></tr><tr><td>cell-mouse-leave</td><td>Se déclenche quand la souris sort d'une cellule.</td><td>row, column, cell, event</td></tr><tr><td>cell-click</td><td>Se déclenche quand l'utilisateur clique sur une cellule.</td><td>row, column, cell, event</td></tr><tr><td>cell-dblclick</td><td>Se déclenche quand l'utilisateur double-clique sur une cellule.</td><td>row, column, cell, event</td></tr><tr><td>cell-contextmenu</td><td>Se déclenche quand l'utilisateur fait un clic droit sur une cellule.</td><td>row, column, cell, event</td></tr><tr><td>row-click</td><td>Se déclenche quand l'utilisateur clique sur une ligne.</td><td>row, column, event</td></tr><tr><td>row-contextmenu</td><td>Se déclenche quand l'utilisateur fait un clic droit sur une ligne.</td><td>row, column, event</td></tr><tr><td>row-dblclick</td><td>Se déclenche quand l'utilisateur double-clique sur une ligne.</td><td>row, column, event</td></tr><tr><td>header-click</td><td>Se déclenche quand l'utilisateur clique sur une colonne du header.</td><td>column, event</td></tr><tr><td>header-contextmenu</td><td>Se déclenche quand l'utilisateur fait un clic droit sur une colonne du header.</td><td>column, event</td></tr><tr><td>sort-change</td><td>Se déclenche quand l'ordre de tri change.</td><td>{ column, prop, order }</td></tr><tr><td>filter-change</td><td>column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered.</td><td>filters</td></tr><tr><td>current-change</td><td>Se déclenche quand la ligne sélectionnée change.</td><td>currentRow, oldCurrentRow</td></tr><tr><td>header-dragend</td><td>Se déclenche après un changement de taille de colonne en déplaçant la ligne verticale du header.</td><td>newWidth, oldWidth, column, event</td></tr><tr><td>expand-change</td><td>triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded)</td><td>row, (expandedRows | expanded)</td></tr></tbody></table>", 1);
const _hoisted_98 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Méthodes de Table ");
const _hoisted_99 = /*#__PURE__*/Object(vue_esm_browser_prod["createStaticVNode"])("<table><thead><tr><th>Méthode</th><th>Description</th><th>Paramètres</th></tr></thead><tbody><tr><td>clearSelection</td><td>Dans les tables avec sélection multiple, efface la sélection.</td><td>—</td></tr><tr><td>toggleRowSelection</td><td>Dans les tables avec sélection multiple, change la sélection d'une ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est sélectionnée.</td><td>row, selected</td></tr><tr><td>toggleAllSelection</td><td>Utilisé dans les tables à sélection multiples, toggle select all and deselect all</td><td>—</td></tr><tr><td>toggleRowExpansion</td><td>used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed</td><td>row, expanded</td></tr><tr><td>setCurrentRow</td><td>Dans les tables à sélection simple, sélectionne une ligne. Sans paramètre la sélection est effacé.</td><td>row</td></tr><tr><td>clearSort</td><td>Efface le tri.</td><td>—</td></tr><tr><td>clearFilter</td><td>Efface les filtres des colonnes dont les <code>columnKey</code> sont passées. Si aucun paramètre, efface tout les filtres.</td><td>columnKeys</td></tr><tr><td>doLayout</td><td>Rafraîchi le layout de la table. Quand la visibilité de la table change vous aurez peut-être besoin de cette méthode pour corriger le layout.</td><td>—</td></tr><tr><td>sort</td><td>Tri la table manuellement. La proriété <code>prop</code> détermine la colonne, <code>order</code> détermine l'ordre de tri.</td><td>prop: string, order: string</td></tr></tbody></table>", 1);
const _hoisted_100 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Slots de Table ");
const _hoisted_101 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("table", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("thead", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tr", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("th", null, "Nom"), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("th", null, "Description")])]), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tbody", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tr", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("td", null, "append"), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("td", null, "Contenu à insérer après la dernière ligne. Vous aurez sans doute besoin de ce slot si vous implémentez un scroll infini. Il sera affiché au-dessus de la ligne de somme s'il y en a une.")])])], -1);
const _hoisted_102 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Attributs de Table-column ");
const _hoisted_103 = /*#__PURE__*/Object(vue_esm_browser_prod["createStaticVNode"])("<table><thead><tr><th>Attribut</th><th>Description</th><th>Type</th><th>Valeurs acceptées</th><th>Défaut</th></tr></thead><tbody><tr><td>type</td><td>Type de la colonne. Si mis à <code>selection</code>, la colonne affichera des checkbox. Si mis à <code>index</code>, la colonne affichera l'indice de la ligne (début à 1). Si mis à <code>expand</code>, affichera l'icône d'extension.</td><td>string</td><td>selection / index / expand</td><td>—</td></tr><tr><td>index</td><td>Personnalise les indices de chaque ligne, marche avec les colonnes <code>type=index</code>.</td><td>number / function(index)</td><td>—</td><td>—</td></tr><tr><td>label</td><td>Label de la colonne.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>column-key</td><td>La clé de la colonne. Si vous avez besoin d'utiliser l'évènement filter-change, vous aurez besoin de cet attribut pour savoir quelle colonne est filtrée.</td><td>string</td><td>string</td><td>—</td></tr><tr><td>prop</td><td>Nom du champ de l'objet de données. Alias: <code>property</code>.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>width</td><td>Largeur de la colonne.</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>min-width</td><td>Largeur minimale de la colonne. Les colonnes avec <code>width</code> ont une largeur fixe, alors que celles avec <code>min-width</code> ont une largeur proportionnellement distribuée.</td><td>string / number</td><td>—</td><td>—</td></tr><tr><td>fixed</td><td>Si la colonne est fixée à droite ou à gauche. Fixée à gauche si <code>true</code>.</td><td>string / boolean</td><td>true / 'left' / 'right'</td><td>—</td></tr><tr><td>render-header</td><td>Fonction de rendu pour le header de cette colonne.</td><td>function({ column, $index })</td><td>—</td><td>—</td></tr><tr><td>sortable</td><td>Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement <code>sort-change</code> de Table.</td><td>boolean / string</td><td>true, false, 'custom'</td><td>false</td></tr><tr><td>sort-method</td><td>Méthode de tri, marche quand <code>sortable</code> est <code>true</code>. Doit retourner un nombre, tout comme Array.sort.</td><td>function(a, b)</td><td>—</td><td>—</td></tr><tr><td>sort-by</td><td>Détermine par quelle propriété effectuer le tri, marche quand <code>sortable</code> est <code>true</code> et <code>sort-method</code> est <code>undefined</code>. Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente.</td><td>function(row, index) / string / array</td><td>—</td><td>—</td></tr><tr><td>sort-orders</td><td>Liste des stratégies de tri, marche quand <code>sortable</code> est <code>true</code>. Accepte un tableau. Lorsque l'utilisateur clique plusieurs fois sur le header, la colonne est triée dans l'ordre des stratégies indiquée.</td><td>array</td><td>Les élements du tableau doivent être parmi: <code>ascending</code>, <code>descending</code> et <code>null</code> (restaure l'état originel du tableau).</td><td>['ascending', 'descending', null]</td></tr><tr><td>resizable</td><td>Si la largeur de la colonne peut être modifiée, marche quand <code>border</code> de <code>el-table</code> est <code>true</code>.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>formatter</td><td>Fonction pour formater le contenu des cellules.</td><td>function(row, column, cellValue, index)</td><td>—</td><td>—</td></tr><tr><td>show-overflow-tooltip</td><td>Si du contenu trop long doit être caché et affiché dans une tooltip quand la souris passe sur la cellule.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>align</td><td>Alignement.</td><td>string</td><td>left / center / right</td><td>left</td></tr><tr><td>header-align</td><td>Alignement du header. Si omis, la valeur du <code>align</code> ci-dessus est appliqué.</td><td>string</td><td>left / center / right</td><td>—</td></tr><tr><td>class-name</td><td>Classe des cellules dans cette colonne.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>label-class-name</td><td>Classe du label de cette colonne.</td><td>string</td><td>—</td><td>—</td></tr><tr><td>selectable</td><td>Détermine si certaines colonnes peuvent être sélectionnées, marche quand <code>type</code> est 'selection'.</td><td>function(row, index)</td><td>—</td><td>—</td></tr><tr><td>reserve-selection</td><td>Si la sélection doit être conservée après rafraîchissement, marche quand <code>type</code> est 'selection'. Notez que <code>row-key</code> est requis.</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>filters</td><td>Un tableau d'options de filtrage. Pour chaque élément, <code>text</code> et <code>value</code> sont requis.</td><td>array[{ text, value }]</td><td>—</td><td>—</td></tr><tr><td>filter-placement</td><td>Emplacement du menu du filtre.</td><td>string</td><td>Voir <code>placement</code> de Tooltip.</td><td>—</td></tr><tr><td>filter-multiple</td><td>Si le filtrage supporte plusieurs options.</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>filter-method</td><td>Méthode de filtrage. Si <code>filter-multiple</code> est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un <code>true</code> sera renvoyé.</td><td>function(value, row, column)</td><td>—</td><td>—</td></tr><tr><td>filtered-value</td><td>Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec <code>render-header</code>.</td><td>array</td><td>—</td><td>—</td></tr></tbody></table>", 1);
const _hoisted_104 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Slot de Table-column ");
const _hoisted_105 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("table", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("thead", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tr", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("th", null, "Nom"), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("th", null, "Description")])]), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tbody", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tr", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("td", null, "—"), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("td", null, "Contenu personnalisé pour les colonnes. Les paramètres sont { row, column, $index }")]), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("tr", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("td", null, "header"), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("td", null, "Contenu personnalisé pour le header. Le paramètre de scope est { column, $index }")])])], -1);
function tablevue_type_template_id_7b43ea8a_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_app_link = Object(vue_esm_browser_prod["resolveComponent"])("app-link");
const _component_app_heading = Object(vue_esm_browser_prod["resolveComponent"])("app-heading");
const _component_element_demo0 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo0");
const _component_demo_block = Object(vue_esm_browser_prod["resolveComponent"])("demo-block");
const _component_element_demo1 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo1");
const _component_element_demo2 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo2");
const _component_element_demo3 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo3");
const _component_element_demo4 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo4");
const _component_element_demo5 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo5");
const _component_element_demo6 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo6");
const _component_element_demo7 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo7");
const _component_element_demo8 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo8");
const _component_element_demo9 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo9");
const _component_element_demo10 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo10");
const _component_element_demo11 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo11");
const _component_element_demo12 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo12");
const _component_element_demo13 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo13");
const _component_element_demo14 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo14");
const _component_element_demo15 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo15");
const _component_element_demo16 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo16");
const _component_element_demo17 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo17");
const _component_element_demo18 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo18");
const _component_element_demo19 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo19");
const _component_right_nav = Object(vue_esm_browser_prod["resolveComponent"])("right-nav");
return Object(vue_esm_browser_prod["openBlock"])(), Object(vue_esm_browser_prod["createElementBlock"])("section", tablevue_type_template_id_7b43ea8a_hoisted_1, [Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "table",
content: "Table",
href: "#table",
level: "2"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [tablevue_type_template_id_7b43ea8a_hoisted_2, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#table"
})]),
_: 1
}), tablevue_type_template_id_7b43ea8a_hoisted_3, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "table-basique",
content: "Table basique",
href: "#table-basique",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [tablevue_type_template_id_7b43ea8a_hoisted_4, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#table-basique"
})]),
_: 1
}), tablevue_type_template_id_7b43ea8a_hoisted_5, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo0)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_7]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_6]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "table-rayee",
content: "Table rayée",
href: "#table-rayee",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_8, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#table-rayee"
})]),
_: 1
}), _hoisted_9, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo1)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_11]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_10]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "table-avec-bordure",
content: "Table avec bordure",
href: "#table-avec-bordure",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_12, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#table-avec-bordure"
})]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo2)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_14]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_13]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "table-avec-statut",
content: "Table avec statut",
href: "#table-avec-statut",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_15, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#table-avec-statut"
})]),
_: 1
}), _hoisted_16, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo3)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_18]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_17]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "table-avec-un-header-fixe",
content: "Table avec un header fixe",
href: "#table-avec-un-header-fixe",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_19, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#table-avec-un-header-fixe"
})]),
_: 1
}), _hoisted_20, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo4)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_22]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_21]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "table-avec-colonnes-fixes",
content: "Table avec colonnes fixes",
href: "#table-avec-colonnes-fixes",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_23, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#table-avec-colonnes-fixes"
})]),
_: 1
}), _hoisted_24, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo5)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_26]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_25]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "table-avec-header-et-colonnes-fixes",
content: "Table avec header et colonnes fixes",
href: "#table-avec-header-et-colonnes-fixes",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_27, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#table-avec-header-et-colonnes-fixes"
})]),
_: 1
}), _hoisted_28, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo6)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_30]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_29]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "hauteur-fluide-dans-une-table-avec-header-et-colonnes-fixes",
content: "Hauteur fluide dans une Table avec header et colonnes fixes",
href: "#hauteur-fluide-dans-une-table-avec-header-et-colonnes-fixes",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_31, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#hauteur-fluide-dans-une-table-avec-header-et-colonnes-fixes"
})]),
_: 1
}), _hoisted_32, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo7)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_34]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_33]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "grouper-les-headers",
content: "Grouper les headers",
href: "#grouper-les-headers",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_35, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#grouper-les-headers"
})]),
_: 1
}), _hoisted_36, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo8)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_38]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_37]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "selecteur-simple",
content: "Sélecteur simple",
href: "#selecteur-simple",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_39, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#selecteur-simple"
})]),
_: 1
}), _hoisted_40, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo9)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_42]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_41]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "selection-multiple",
content: "Sélection multiple",
href: "#selection-multiple",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_43, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#selection-multiple"
})]),
_: 1
}), _hoisted_44, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo10)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_46]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_45]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "trier",
content: "Trier",
href: "#trier",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_47, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#trier"
})]),
_: 1
}), _hoisted_48, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo11)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_50]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_49]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "filtrer",
content: "Filtrer",
href: "#filtrer",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_51, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#filtrer"
})]),
_: 1
}), _hoisted_52, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo12)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_54]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_53]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "template-de-colonne-personnalise",
content: "Template de colonne personnalisé",
href: "#template-de-colonne-personnalise",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_55, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#template-de-colonne-personnalise"
})]),
_: 1
}), _hoisted_56, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo13)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_68]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createElementVNode"])("div", null, [Object(vue_esm_browser_prod["createElementVNode"])("p", null, [_hoisted_57, _hoisted_58, _hoisted_59, _hoisted_60, _hoisted_61, _hoisted_62, _hoisted_63, _hoisted_64, _hoisted_65, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
href: "https://v3.vuejs.org/guide/component-slots.html"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_66]),
_: 1
}), _hoisted_67])])]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "table-avec-header-personnalise",
content: "Table avec header personnalisé",
href: "#table-avec-header-personnalise",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_69, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#table-avec-header-personnalise"
})]),
_: 1
}), _hoisted_70, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo14)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_74]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createElementVNode"])("div", null, [Object(vue_esm_browser_prod["createElementVNode"])("p", null, [_hoisted_71, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
href: "https://v3.vuejs.org/guide/component-slots.html"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_72]),
_: 1
}), _hoisted_73])])]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "ligne-extensible",
content: "Ligne extensible",
href: "#ligne-extensible",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_75, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#ligne-extensible"
})]),
_: 1
}), _hoisted_76, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo15)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_78]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_77]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "arborescence-et-lazy-loading",
content: "Arborescence et lazy loading",
href: "#arborescence-et-lazy-loading",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_79, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#arborescence-et-lazy-loading"
})]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo16)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_81]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_80]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "ligne-de-somme",
content: "Ligne de somme",
href: "#ligne-de-somme",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_82, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#ligne-de-somme"
})]),
_: 1
}), _hoisted_83, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo17)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_85]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_84]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "etendue-des-lignes-et-colonnes",
content: "Étendue des lignes et colonnes",
href: "#etendue-des-lignes-et-colonnes",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_86, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#etendue-des-lignes-et-colonnes"
})]),
_: 1
}), _hoisted_87, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo18)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_89]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_88]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "indices-personnalises",
content: "Indices personnalisés",
href: "#indices-personnalises",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_90, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#indices-personnalises"
})]),
_: 1
}), _hoisted_91, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo19)]),
highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_93]),
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_92]),
_: 1
}), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "attributs-de-table",
content: "Attributs de Table",
href: "#attributs-de-table",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_94, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#attributs-de-table"
})]),
_: 1
}), _hoisted_95, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "evenements-de-table",
content: "Évènements de Table",
href: "#evenements-de-table",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_96, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#evenements-de-table"
})]),
_: 1
}), _hoisted_97, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "methodes-de-table",
content: "Méthodes de Table",
href: "#methodes-de-table",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_98, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#methodes-de-table"
})]),
_: 1
}), _hoisted_99, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "slots-de-table",
content: "Slots de Table",
href: "#slots-de-table",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_100, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#slots-de-table"
})]),
_: 1
}), _hoisted_101, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "attributs-de-table-column",
content: "Attributs de Table-column",
href: "#attributs-de-table-column",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_102, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#attributs-de-table-column"
})]),
_: 1
}), _hoisted_103, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
id: "slot-de-table-column",
content: "Slot de Table-column",
href: "#slot-de-table-column",
level: "3"
}, {
default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_104, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
class: "header-anchor",
href: "#slot-de-table-column"
})]),
_: 1
}), _hoisted_105, Object(vue_esm_browser_prod["createVNode"])(_component_right_nav)]);
}
// CONCATENATED MODULE: ./website/docs/fr-FR/table.md?vue&type=template&id=7b43ea8a
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--3-0!./website/md-loader!./website/docs/fr-FR/table.md?vue&type=script&lang=ts
/* harmony default export */ var tablevue_type_script_lang_ts = ({
name: 'component-doc',
components: {
"element-demo0": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "date",
label: "Date",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "address",
label: "Adresse"
})]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
};
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo1": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
stripe: "",
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "date",
label: "Date",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "address",
label: "Adresse"
})]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
};
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo2": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
border: "",
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "date",
label: "Date",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "address",
label: "Adresse"
})]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
};
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo3": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
style: {
"width": "100%"
},
"row-class-name": _ctx.tableRowClassName
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "date",
label: "Date",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "address",
label: "Adresse"
})]),
_: 1
}, 8, ["data", "row-class-name"])]);
}
const democomponentExport = {
methods: {
tableRowClassName({
row,
rowIndex
}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
};
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo4": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
height: "250",
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "date",
label: "Date",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "address",
label: "Adresse"
})]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-08',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-06',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-07',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
};
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo5": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
createTextVNode: _createTextVNode,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
const _hoisted_1 = /*#__PURE__*/_createTextVNode("Detail");
const _hoisted_2 = /*#__PURE__*/_createTextVNode("Editer");
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_button = _resolveComponent("el-button");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
fixed: "",
prop: "date",
label: "Date",
width: "150"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "120"
}), _createVNode(_component_el_table_column, {
prop: "state",
label: "État",
width: "120"
}), _createVNode(_component_el_table_column, {
prop: "city",
label: "Ville",
width: "120"
}), _createVNode(_component_el_table_column, {
prop: "address",
label: "Adresse",
width: "600"
}), _createVNode(_component_el_table_column, {
prop: "zip",
label: "Zip",
width: "120"
}), _createVNode(_component_el_table_column, {
fixed: "right",
label: "Opérations",
width: "120"
}, {
default: _withCtx(scope => [_createVNode(_component_el_button, {
onClick: _ctx.handleClick,
type: "text",
size: "small"
}, {
default: _withCtx(() => [_hoisted_1]),
_: 1
}, 8, ["onClick"]), _createVNode(_component_el_button, {
type: "text",
size: "small"
}, {
default: _withCtx(() => [_hoisted_2]),
_: 1
})]),
_: 1
})]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
methods: {
handleClick() {
console.log('click');
}
},
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home'
}, {
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office'
}, {
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home'
}, {
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office'
}]
};
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo6": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
style: {
"width": "100%"
},
height: "250"
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
fixed: "",
prop: "date",
label: "Date",
width: "150"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "120"
}), _createVNode(_component_el_table_column, {
prop: "state",
label: "État",
width: "120"
}), _createVNode(_component_el_table_column, {
prop: "city",
label: "Ville",
width: "320"
}), _createVNode(_component_el_table_column, {
prop: "address",
label: "Adresse",
width: "600"
}), _createVNode(_component_el_table_column, {
prop: "zip",
label: "Zip",
width: "120"
})]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-08',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-06',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-07',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}]
};
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo7": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
createTextVNode: _createTextVNode,
withModifiers: _withModifiers,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
const _hoisted_1 = /*#__PURE__*/_createTextVNode(" Supprimer ");
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_button = _resolveComponent("el-button");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
style: {
"width": "100%"
},
"max-height": "250"
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
fixed: "",
prop: "date",
label: "Date",
width: "150"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "120"
}), _createVNode(_component_el_table_column, {
prop: "state",
label: "État",
width: "120"
}), _createVNode(_component_el_table_column, {
prop: "city",
label: "Ville",
width: "120"
}), _createVNode(_component_el_table_column, {
prop: "address",
label: "Adresse",
width: "600"
}), _createVNode(_component_el_table_column, {
prop: "zip",
label: "Zip",
width: "120"
}), _createVNode(_component_el_table_column, {
fixed: "right",
label: "Opérations",
width: "120"
}, {
default: _withCtx(scope => [_createVNode(_component_el_button, {
onClick: _withModifiers($event => _ctx.deleteRow(scope.$index, _ctx.tableData), ["prevent"]),
type: "text",
size: "small"
}, {
default: _withCtx(() => [_hoisted_1]),
_: 2
}, 1032, ["onClick"])]),
_: 1
})]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
methods: {
deleteRow(index, rows) {
rows.splice(index, 1);
}
},
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-08',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-06',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-07',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}]
};
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo8": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "date",
label: "Date",
width: "150"
}), _createVNode(_component_el_table_column, {
label: "Informations de livraison"
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "120"
}), _createVNode(_component_el_table_column, {
label: "Informations d'adresse"
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "state",
label: "État",
width: "120"
}), _createVNode(_component_el_table_column, {
prop: "city",
label: "Ville",
width: "120"
}), _createVNode(_component_el_table_column, {
prop: "address",
label: "Adresse"
}), _createVNode(_component_el_table_column, {
prop: "zip",
label: "Zip",
width: "120"
})]),
_: 1
})]),
_: 1
})]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-08',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-06',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-07',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}]
};
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo9": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
createTextVNode: _createTextVNode,
createElementVNode: _createElementVNode,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
const _hoisted_1 = {
style: {
"margin-top": "20px"
}
};
const _hoisted_2 = /*#__PURE__*/_createTextVNode("Sélectionner la deuxième ligne");
const _hoisted_3 = /*#__PURE__*/_createTextVNode("Effacer la sélection");
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
const _component_el_button = _resolveComponent("el-button");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
ref: "singleTable",
data: _ctx.tableData,
"highlight-current-row": "",
onCurrentChange: _ctx.handleCurrentChange,
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
type: "index",
width: "50"
}), _createVNode(_component_el_table_column, {
property: "date",
label: "Date",
width: "120"
}), _createVNode(_component_el_table_column, {
property: "name",
label: "Nom",
width: "120"
}), _createVNode(_component_el_table_column, {
property: "address",
label: "Adresse"
})]),
_: 1
}, 8, ["data", "onCurrentChange"]), _createElementVNode("div", _hoisted_1, [_createVNode(_component_el_button, {
onClick: _cache[0] || (_cache[0] = $event => _ctx.setCurrent(_ctx.tableData[1]))
}, {
default: _withCtx(() => [_hoisted_2]),
_: 1
}), _createVNode(_component_el_button, {
onClick: _cache[1] || (_cache[1] = $event => _ctx.setCurrent())
}, {
default: _withCtx(() => [_hoisted_3]),
_: 1
})])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}],
currentRow: null
};
},
methods: {
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
handleCurrentChange(val) {
this.currentRow = val;
}
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo10": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
toDisplayString: _toDisplayString,
createTextVNode: _createTextVNode,
withCtx: _withCtx,
createElementVNode: _createElementVNode,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
const _hoisted_1 = {
style: {
"margin-top": "20px"
}
};
const _hoisted_2 = /*#__PURE__*/_createTextVNode("Sélectionner les deuxième et troisième lignes");
const _hoisted_3 = /*#__PURE__*/_createTextVNode("Effacer la sélection");
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
const _component_el_button = _resolveComponent("el-button");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
ref: "multipleTable",
data: _ctx.tableData,
style: {
"width": "100%"
},
onSelectionChange: _ctx.handleSelectionChange
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
type: "selection",
width: "55"
}), _createVNode(_component_el_table_column, {
label: "Date",
width: "120"
}, {
default: _withCtx(scope => [_createTextVNode(_toDisplayString(scope.row.date), 1)]),
_: 1
}), _createVNode(_component_el_table_column, {
property: "name",
label: "Nom",
width: "120"
}), _createVNode(_component_el_table_column, {
property: "address",
label: "Adresse",
"show-overflow-tooltip": ""
})]),
_: 1
}, 8, ["data", "onSelectionChange"]), _createElementVNode("div", _hoisted_1, [_createVNode(_component_el_button, {
onClick: _cache[0] || (_cache[0] = $event => _ctx.toggleSelection([_ctx.tableData[1], _ctx.tableData[2]]))
}, {
default: _withCtx(() => [_hoisted_2]),
_: 1
}), _createVNode(_component_el_button, {
onClick: _cache[1] || (_cache[1] = $event => _ctx.toggleSelection())
}, {
default: _withCtx(() => [_hoisted_3]),
_: 1
})])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-08',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-06',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-07',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}],
multipleSelection: []
};
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo11": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
"default-sort": {
prop: 'date',
order: 'descending'
},
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "date",
label: "Date",
sortable: "",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "address",
label: "Adresse",
formatter: _ctx.formatter
}, null, 8, ["formatter"])]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
};
},
methods: {
formatter(row, column) {
return row.address;
}
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo12": function () {
const {
createTextVNode: _createTextVNode,
resolveComponent: _resolveComponent,
withCtx: _withCtx,
createVNode: _createVNode,
toDisplayString: _toDisplayString,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
const _hoisted_1 = /*#__PURE__*/_createTextVNode("Effacer le filtre date");
const _hoisted_2 = /*#__PURE__*/_createTextVNode("Effacer tout les filtres");
function render(_ctx, _cache) {
const _component_el_button = _resolveComponent("el-button");
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_tag = _resolveComponent("el-tag");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_button, {
onClick: _ctx.resetDateFilter
}, {
default: _withCtx(() => [_hoisted_1]),
_: 1
}, 8, ["onClick"]), _createVNode(_component_el_button, {
onClick: _ctx.clearFilter
}, {
default: _withCtx(() => [_hoisted_2]),
_: 1
}, 8, ["onClick"]), _createVNode(_component_el_table, {
"row-key": "date",
ref: "filterTable",
data: _ctx.tableData,
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "date",
label: "Date",
sortable: "",
width: "180",
"column-key": "date",
filters: [{
text: '2016-05-01',
value: '2016-05-01'
}, {
text: '2016-05-02',
value: '2016-05-02'
}, {
text: '2016-05-03',
value: '2016-05-03'
}, {
text: '2016-05-04',
value: '2016-05-04'
}],
"filter-method": _ctx.filterHandler
}, null, 8, ["filter-method"]), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "address",
label: "Adresse",
formatter: _ctx.formatter
}, null, 8, ["formatter"]), _createVNode(_component_el_table_column, {
prop: "tag",
label: "Tag",
width: "100",
filters: [{
text: 'Home',
value: 'Home'
}, {
text: 'Office',
value: 'Office'
}],
"filter-method": _ctx.filterTag,
"filter-placement": "bottom-end"
}, {
default: _withCtx(scope => [_createVNode(_component_el_tag, {
type: scope.row.tag === 'Home' ? 'primary' : 'success',
"disable-transitions": ""
}, {
default: _withCtx(() => [_createTextVNode(_toDisplayString(scope.row.tag), 1)]),
_: 2
}, 1032, ["type"])]),
_: 1
}, 8, ["filter-method"])]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Home'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Office'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Home'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Office'
}]
};
},
methods: {
resetDateFilter() {
this.$refs.filterTable.clearFilter('date');
},
clearFilter() {
this.$refs.filterTable.clearFilter();
},
formatter(row, column) {
return row.address;
},
filterTag(value, row) {
return row.tag === value;
},
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
}
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo13": function () {
const {
createElementVNode: _createElementVNode,
toDisplayString: _toDisplayString,
resolveComponent: _resolveComponent,
withCtx: _withCtx,
createVNode: _createVNode,
createTextVNode: _createTextVNode,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
const _hoisted_1 = /*#__PURE__*/_createElementVNode("i", {
class: "el-icon-time"
}, null, -1);
const _hoisted_2 = {
style: {
"margin-left": "10px"
}
};
const _hoisted_3 = {
class: "name-wrapper"
};
const _hoisted_4 = /*#__PURE__*/_createTextVNode("Editer");
const _hoisted_5 = /*#__PURE__*/_createTextVNode("Supprimer");
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_tag = _resolveComponent("el-tag");
const _component_el_popover = _resolveComponent("el-popover");
const _component_el_button = _resolveComponent("el-button");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
label: "Date",
width: "180"
}, {
default: _withCtx(scope => [_hoisted_1, _createElementVNode("span", _hoisted_2, _toDisplayString(scope.row.date), 1)]),
_: 1
}), _createVNode(_component_el_table_column, {
label: "Nom",
width: "180"
}, {
default: _withCtx(scope => [_createVNode(_component_el_popover, {
effect: "light",
trigger: "hover",
placement: "top"
}, {
default: _withCtx(() => [_createElementVNode("p", null, "姓名: " + _toDisplayString(scope.row.name), 1), _createElementVNode("p", null, "住址: " + _toDisplayString(scope.row.address), 1)]),
reference: _withCtx(() => [_createElementVNode("div", _hoisted_3, [_createVNode(_component_el_tag, {
size: "medium"
}, {
default: _withCtx(() => [_createTextVNode(_toDisplayString(scope.row.name), 1)]),
_: 2
}, 1024)])]),
_: 2
}, 1024)]),
_: 1
}), _createVNode(_component_el_table_column, {
label: "Opérations"
}, {
default: _withCtx(scope => [_createVNode(_component_el_button, {
size: "mini",
onClick: $event => _ctx.handleEdit(scope.$index, scope.row)
}, {
default: _withCtx(() => [_hoisted_4]),
_: 2
}, 1032, ["onClick"]), _createVNode(_component_el_button, {
size: "mini",
type: "danger",
onClick: $event => _ctx.handleDelete(scope.$index, scope.row)
}, {
default: _withCtx(() => [_hoisted_5]),
_: 2
}, 1032, ["onClick"])]),
_: 1
})]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
};
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo14": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
createTextVNode: _createTextVNode,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
const _hoisted_1 = /*#__PURE__*/_createTextVNode("Editer");
const _hoisted_2 = /*#__PURE__*/_createTextVNode("Supprimer");
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_input = _resolveComponent("el-input");
const _component_el_button = _resolveComponent("el-button");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData.filter(data => !_ctx.search || data.name.toLowerCase().includes(_ctx.search.toLowerCase())),
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
label: "Date",
prop: "date"
}), _createVNode(_component_el_table_column, {
label: "Name",
prop: "name"
}), _createVNode(_component_el_table_column, {
align: "right"
}, {
header: _withCtx(() => [_createVNode(_component_el_input, {
modelValue: _ctx.search,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.search = $event),
size: "mini",
placeholder: "Type to search"
}, null, 8, ["modelValue"])]),
default: _withCtx(scope => [_createVNode(_component_el_button, {
size: "mini",
onClick: $event => _ctx.handleEdit(scope.$index, scope.row)
}, {
default: _withCtx(() => [_hoisted_1]),
_: 2
}, 1032, ["onClick"]), _createVNode(_component_el_button, {
size: "mini",
type: "danger",
onClick: $event => _ctx.handleDelete(scope.$index, scope.row)
}, {
default: _withCtx(() => [_hoisted_2]),
_: 2
}, 1032, ["onClick"])]),
_: 1
})]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'John',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Morgan',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Jessy',
address: 'No. 189, Grove St, Los Angeles'
}],
search: ''
};
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo15": function () {
const {
toDisplayString: _toDisplayString,
createElementVNode: _createElementVNode,
resolveComponent: _resolveComponent,
withCtx: _withCtx,
createVNode: _createVNode,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
type: "expand"
}, {
default: _withCtx(props => [_createElementVNode("p", null, "État: " + _toDisplayString(props.row.state), 1), _createElementVNode("p", null, "Ville: " + _toDisplayString(props.row.city), 1), _createElementVNode("p", null, "Adresse: " + _toDisplayString(props.row.address), 1), _createElementVNode("p", null, "Zip: " + _toDisplayString(props.row.zip), 1)]),
_: 1
}), _createVNode(_component_el_table_column, {
label: "Date",
prop: "date"
}), _createVNode(_component_el_table_column, {
label: "Nom",
prop: "name"
})]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-08',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-06',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-07',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}]
};
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo16": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
createElementVNode: _createElementVNode,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createElementVNode("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
style: {
"width": "100%",
"margin-bottom": "20px"
},
"row-key": "id",
border: "",
"default-expand-all": ""
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "date",
label: "date",
sortable: "",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
sortable: "",
width: "180"
})]),
_: 1
}, 8, ["data"]), _createVNode(_component_el_table, {
data: _ctx.tableData1,
style: {
"width": "100%"
},
"row-key": "id",
border: "",
lazy: "",
load: _ctx.load,
"tree-props": {
children: 'children',
hasChildren: 'hasChildren'
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "date",
label: "Date",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "180"
})]),
_: 1
}, 8, ["data", "load"])])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
id: 1,
date: '2016-05-02',
name: 'wangxiaohu'
}, {
id: 2,
date: '2016-05-04',
name: 'wangxiaohu'
}, {
id: 3,
date: '2016-05-01',
name: 'wangxiaohu',
children: [{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu'
}, {
id: 32,
date: '2016-05-01',
name: 'wangxiaohu'
}]
}, {
id: 4,
date: '2016-05-03',
name: 'wangxiaohu'
}],
tableData1: [{
id: 1,
date: '2016-05-02',
name: 'wangxiaohu'
}, {
id: 2,
date: '2016-05-04',
name: 'wangxiaohu'
}, {
id: 3,
date: '2016-05-01',
name: 'wangxiaohu',
hasChildren: true
}, {
id: 4,
date: '2016-05-03',
name: 'wangxiaohu'
}]
};
},
methods: {
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu'
}, {
id: 32,
date: '2016-05-01',
name: 'wangxiaohu'
}]);
}, 1000);
}
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo17": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
border: "",
"show-summary": "",
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "id",
label: "ID",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom"
}), _createVNode(_component_el_table_column, {
prop: "amount1",
sortable: "",
label: "Quantité 1"
}), _createVNode(_component_el_table_column, {
prop: "amount2",
sortable: "",
label: "Quantité 2"
}), _createVNode(_component_el_table_column, {
prop: "amount3",
sortable: "",
label: "Quantité 3"
})]),
_: 1
}, 8, ["data"]), _createVNode(_component_el_table, {
data: _ctx.tableData,
border: "",
height: "200",
"summary-method": _ctx.getSummaries,
"show-summary": "",
style: {
"width": "100%",
"margin-top": "20px"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "id",
label: "ID",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom"
}), _createVNode(_component_el_table_column, {
prop: "amount1",
label: "Coût 1 ($)"
}), _createVNode(_component_el_table_column, {
prop: "amount2",
label: "Coût 2 ($)"
}), _createVNode(_component_el_table_column, {
prop: "amount3",
label: "Coût 3 ($)"
})]),
_: 1
}, 8, ["data", "summary-method"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
id: '12987122',
name: 'Tom',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: 'Tom',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: 'Tom',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: 'Tom',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: 'Tom',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
},
methods: {
getSummaries(param) {
const {
columns,
data
} = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = 'Coût total';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = '$ ' + values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
} else {
sums[index] = 'N/A';
}
});
return sums;
}
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo18": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
createElementVNode: _createElementVNode,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createElementVNode("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
"span-method": _ctx.arraySpanMethod,
border: "",
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "id",
label: "ID",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom"
}), _createVNode(_component_el_table_column, {
prop: "amount1",
sortable: "",
label: "Quantité 1"
}), _createVNode(_component_el_table_column, {
prop: "amount2",
sortable: "",
label: "Quantité 2"
}), _createVNode(_component_el_table_column, {
prop: "amount3",
sortable: "",
label: "Quantité 3"
})]),
_: 1
}, 8, ["data", "span-method"]), _createVNode(_component_el_table, {
data: _ctx.tableData,
"span-method": _ctx.objectSpanMethod,
border: "",
style: {
"width": "100%",
"margin-top": "20px"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
prop: "id",
label: "ID",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom"
}), _createVNode(_component_el_table_column, {
prop: "amount1",
label: "Quantité 1"
}), _createVNode(_component_el_table_column, {
prop: "amount2",
label: "Quantité 2"
}), _createVNode(_component_el_table_column, {
prop: "amount3",
label: "Quantité 3"
})]),
_: 1
}, 8, ["data", "span-method"])])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
id: '12987122',
name: 'Tom',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: 'Tom',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: 'Tom',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: 'Tom',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: 'Tom',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
},
methods: {
arraySpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
};
return {
render,
...democomponentExport
};
}(),
"element-demo19": function () {
const {
resolveComponent: _resolveComponent,
createVNode: _createVNode,
withCtx: _withCtx,
openBlock: _openBlock,
createElementBlock: _createElementBlock
} = vue_esm_browser_prod;
function render(_ctx, _cache) {
const _component_el_table_column = _resolveComponent("el-table-column");
const _component_el_table = _resolveComponent("el-table");
return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_table, {
data: _ctx.tableData,
style: {
"width": "100%"
}
}, {
default: _withCtx(() => [_createVNode(_component_el_table_column, {
type: "index",
index: _ctx.indexMethod
}, null, 8, ["index"]), _createVNode(_component_el_table_column, {
prop: "date",
label: "Date",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "name",
label: "Nom",
width: "180"
}), _createVNode(_component_el_table_column, {
prop: "address",
label: "Adresse"
})]),
_: 1
}, 8, ["data"])]);
}
const democomponentExport = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home'
}, {
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office'
}, {
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home'
}, {
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office'
}]
};
},
methods: {
indexMethod(index) {
return index * 2;
}
}
};
return {
render,
...democomponentExport
};
}()
}
});
// CONCATENATED MODULE: ./website/docs/fr-FR/table.md?vue&type=script&lang=ts
// CONCATENATED MODULE: ./website/docs/fr-FR/table.md
tablevue_type_script_lang_ts.render = tablevue_type_template_id_7b43ea8a_render
/* harmony default export */ var table = __webpack_exports__["default"] = (tablevue_type_script_lang_ts);
/***/ })
}]);
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手